<template>
  <div class="rpc-analysis">
    <!-- 页面标题 -->
    <div class="title-bar">
      <h1>RPC调用分析</h1>
      <p class="subtitle">深度分析系统RPC调用模式和性能指标</p>
    </div>

    <!-- 数据来源提示 -->
    <div v-if="isUsingMockData" class="data-warning">
      <n-alert type="warning" :show-icon="true">
        <template #header>
          数据来源提示
        </template>
        当前显示的是模拟数据，因为未找到真实的 RPC 记录文件。请确保 dump_info/AppDump/{appname}/rpc_records.log 文件存在。
      </n-alert>
    </div>

    <!-- 主要内容区域 -->
    <div>
      <!-- 全局概览 -->
      <div class="global-overview">
      <h2>全局概览</h2>
      
      <!-- 加载状态 -->
      <div v-if="loadingStates.overview" class="section-loading">
        <n-spin size="medium">
          <template #description>
            正在加载概览数据...
          </template>
        </n-spin>
      </div>
      
      <!-- 统计卡片 -->
      <div v-else class="stats-cards">
        <div class="stat-card">
          <div class="stat-icon">
            <n-icon size="24" color="#1890ff">
              <Activity />
            </n-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ formatNumber(globalStats.totalCalls) }}</div>
            <div class="stat-label">今日总调用量</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">
            <n-icon size="24" color="#52c41a">
              <Server />
            </n-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ globalStats.activeServices }}</div>
            <div class="stat-label">当前活跃服务数</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">
            <n-icon size="24" color="#fa8c16">
              <Code />
            </n-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ globalStats.activeMethods }}</div>
            <div class="stat-label">当前活跃方法数</div>
          </div>
        </div>
      </div>
      
      <!-- 趋势图 -->
      <div v-if="!loadingStates.overview" class="trend-chart">
        <h3>全网RPC调用量趋势 (过去24小时)</h3>
        <div ref="trendChartRef" class="chart-container"></div>
      </div>
    </div>

    <!-- 服务调用排行榜 -->
    <div class="service-leaderboard">
      <div class="leaderboard-header">
        <h2>服务调用排行榜</h2>
        <n-button 
          v-if="!loadingStates.serviceLeaderboard"
          @click="toggleShowAllServices" 
          type="primary" 
          ghost
          size="small"
        >
          {{ showAllServices ? '收起' : '查看全部' }}
        </n-button>
      </div>
      
      <!-- 加载状态 -->
      <div v-if="loadingStates.serviceLeaderboard" class="section-loading">
        <n-spin size="medium">
          <template #description>
            正在加载服务排行榜数据...
          </template>
        </n-spin>
      </div>
      
      <div v-else class="leaderboard-content">
        <h3>服务调用量{{ showAllServices ? '全部' : 'TOP 10' }}</h3>
        <div 
          ref="serviceChartRef" 
          class="chart-container"
          :style="{ height: chartHeight + 'px' }"
        ></div>
      </div>
    </div>

    <!-- 热门方法排行榜 -->
    <div class="hot-methods">
      <h2>热门方法排行榜</h2>
      
      <!-- 加载状态 -->
      <div v-if="loadingStates.hotMethods" class="section-loading">
        <n-spin size="medium">
          <template #description>
            正在加载热门方法数据...
          </template>
        </n-spin>
      </div>
      
      <div v-else class="methods-table">
        <n-data-table
          :columns="methodColumns"
          :data="hotMethods"
          :pagination="{ pageSize: 20 }"
          :row-props="methodRowProps"
        />
      </div>
    </div>

    <!-- 服务详情模态框 -->
    <n-modal v-model:show="showServiceDetail" preset="card" style="width: 90%; max-width: 1200px;">
      <template #header>
        <span>服务详情 - {{ selectedService?.name }}</span>
      </template>
      
      <div v-if="selectedService" class="service-detail">
        <!-- 服务基本信息 -->
        <div class="service-info-card">
          <h3>基本信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <label>服务名:</label>
              <span>{{ selectedService.name }}</span>
            </div>
            <div class="info-item">
              <label>总调用次数:</label>
              <span>{{ formatNumber(selectedService.totalCalls) }}</span>
            </div>
            <div class="info-item">
              <label>方法数量:</label>
              <span>{{ selectedService.methods?.length || 0 }}</span>
            </div>
          </div>
        </div>
        
        <!-- 方法调用分布饼图 -->
        <div class="method-distribution">
          <h3>方法调用分布</h3>
          <div ref="pieChartRef" class="chart-container"></div>
        </div>
        
        <!-- 方法调用趋势图 -->
        <div class="method-trends">
          <h3>核心方法调用趋势</h3>
          <div ref="methodTrendChartRef" class="chart-container"></div>
        </div>
        
        <!-- 详细数据表格 -->
        <div class="method-details">
          <h3>详细数据</h3>
          <n-data-table
            :columns="serviceDetailColumns"
            :data="selectedService.methods || []"
            :pagination="{ pageSize: 10 }"
          />
        </div>
      </div>
    </n-modal>

    <!-- 依赖关系图 -->
    <div class="dependency-map">
      <h2>依赖关系图</h2>
      
      <!-- 加载状态 -->
      <div v-if="loadingStates.dependency" class="section-loading">
        <n-spin size="medium">
          <template #description>
            正在加载依赖关系数据...
          </template>
        </n-spin>
      </div>
      
      <div v-else class="dependency-content">
        <div class="dependency-controls">
          <n-space>
            <n-button @click="refreshDependencyGraph">刷新图表</n-button>
            <n-button @click="resetDependencyView">重置视图</n-button>
          </n-space>
        </div>
        <div ref="dependencyGraphRef" class="graph-container"></div>
      </div>
    </div>

    <!-- 趋势分析器 -->
    <div class="trend-analyzer">
      <h2>趋势分析器</h2>
      
      <!-- 加载状态 -->
      <div v-if="loadingStates.analyzer" class="section-loading">
        <n-spin size="medium">
          <template #description>
            正在加载分析器数据...
          </template>
        </n-spin>
      </div>
      
      <div v-else class="analyzer-content">
        <!-- 查询构建器 -->
        <div class="query-builder">
          <n-space>
            <n-select
              v-model:value="queryParams.serviceName"
              :options="serviceOptions"
              placeholder="选择服务"
              clearable
              style="width: 200px"
            />
            <n-select
              v-model:value="queryParams.methodName"
              :options="methodOptions"
              placeholder="选择方法"
              clearable
              style="width: 200px"
            />
            <n-select
              v-model:value="queryParams.timeRange"
              :options="timeRangeOptions"
              placeholder="时间范围"
              style="width: 150px"
            />
            <n-button type="primary" @click="executeQuery">查询</n-button>
          </n-space>
        </div>
        
        <!-- 自定义图表 -->
        <div class="custom-chart">
          <div ref="customChartRef" class="chart-container"></div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, computed } from 'vue'
import { NIcon, NDataTable, NModal, NSelect, NButton, NSpace, NAlert, NSpin, useMessage } from 'naive-ui'
import { Activity, Server, Code } from '@vicons/tabler'
import * as echarts from 'echarts'
import { useRPCAnalysisStore } from '../stores/rpcAnalysis'

const message = useMessage()
const rpcStore = useRPCAnalysisStore()

// 图表引用
const trendChartRef = ref()
const serviceChartRef = ref()
const pieChartRef = ref()
const methodTrendChartRef = ref()
const dependencyGraphRef = ref()
const customChartRef = ref()

// 图表实例
let trendChart: echarts.ECharts | null = null
let serviceChart: echarts.ECharts | null = null
let pieChart: echarts.ECharts | null = null
let methodTrendChart: echarts.ECharts | null = null
let dependencyGraph: echarts.ECharts | null = null
let customChart: echarts.ECharts | null = null

// 数据状态
const globalStats = computed(() => rpcStore.globalStats)
const serviceLeaderboard = computed(() => rpcStore.serviceLeaderboard)
const hotMethods = computed(() => rpcStore.hotMethods)
const isUsingMockData = computed(() => rpcStore.isUsingMockData)
const selectedService = ref(null)
const showServiceDetail = ref(false)
const showAllServices = ref(false)

// 分区域加载状态
const loadingStates = reactive({
  overview: true,
  serviceLeaderboard: true,
  hotMethods: true,
  dependency: true,
  analyzer: true
})

// 计算显示的服务数据
const displayedServices = computed(() => {
  if (showAllServices.value) {
    return serviceLeaderboard.value
  }
  return serviceLeaderboard.value.slice(0, 10)
})

// 计算图表高度
const chartHeight = computed(() => {
  const serviceCount = displayedServices.value.length
  // 基础高度400px，每个服务增加30px高度，最小400px，最大800px
  const calculatedHeight = Math.max(400, Math.min(800, 400 + (serviceCount - 10) * 30))
  return calculatedHeight
})

// 查询参数
const queryParams = reactive({
  serviceName: null,
  methodName: null,
  timeRange: '24h'
})

// 选项数据
const serviceOptions = computed(() => 
  rpcStore.allServices.map(service => ({
    label: service.name,
    value: service.name
  }))
)

const methodOptions = computed(() => 
  rpcStore.allMethods.map(method => ({
    label: `${method.serviceName}.${method.methodName}`,
    value: method.methodName
  }))
)

const timeRangeOptions = [
  { label: '过去1小时', value: '1h' },
  { label: '过去24小时', value: '24h' },
  { label: '过去7天', value: '7d' },
  { label: '过去30天', value: '30d' }
]

// 表格列定义
const methodColumns = [
  { title: '排名', key: 'rank', width: 80 },
  { title: '服务名', key: 'serviceName', width: 200 },
  { title: '方法名', key: 'methodName', width: 200 },
  { title: '调用次数', key: 'callCount', width: 120, sorter: true },
  { title: '占比', key: 'percentage', width: 100 }
]

const serviceDetailColumns = [
  { title: '资源协议路径', key: 'resourcePath', width: 250 },
  { title: '资源协作接口', key: 'resourceInterface', width: 200 },
  { title: '访问方法', key: 'method', width: 150 },
  { title: '调用次数', key: 'callCount', width: 120 }
]

// 工具函数
const formatNumber = (num: number): string => {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

// 切换显示全部服务
const toggleShowAllServices = () => {
  showAllServices.value = !showAllServices.value
  // 只需要重新设置图表数据和调整大小，不需要完全重新初始化
  nextTick(() => {
    if (serviceChart) {
      const chartData = displayedServices.value.slice().reverse()
      const option = {
        yAxis: {
          data: chartData.map(item => item.name)
        },
        series: [{
          data: chartData.map(item => item.totalCalls)
        }]
      }
      serviceChart.setOption(option)
      serviceChart.resize()
    }
  })
}

// 表格行属性
const methodRowProps = (row: any) => {
  return {
    style: 'cursor: pointer;',
    onClick: () => {
      // 点击方法行的处理逻辑
      message.info(`查看方法详情: ${row.serviceName}.${row.methodName}`)
    }
  }
}

// 初始化趋势图
const initTrendChart = () => {
  if (!trendChartRef.value) return
  
  trendChart = echarts.init(trendChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    xAxis: {
      type: 'category',
      data: rpcStore.trendData.map(item => item.time)
    },
    yAxis: {
      type: 'value',
      name: '调用次数'
    },
    series: [{
      name: 'RPC调用量',
      type: 'line',
      smooth: true,
      data: rpcStore.trendData.map(item => item.count),
      areaStyle: {
        opacity: 0.3
      }
    }]
  }
  trendChart.setOption(option)
}

// 初始化服务排行榜图表
const initServiceChart = () => {
  if (!serviceChartRef.value) return
  
  // 检查数据是否已加载
  console.log('🔍 服务排行榜图表初始化: 检查数据状态')
  console.log('📊 serviceLeaderboard.value:', serviceLeaderboard.value)
  console.log('📊 displayedServices.value:', displayedServices.value)
  
  if (!serviceLeaderboard.value || serviceLeaderboard.value.length === 0) {
    console.log('⚠️ 服务排行榜图表初始化: 数据为空，跳过初始化')
    return
  }
  
  // 如果图表实例已存在，先销毁
  if (serviceChart) {
    serviceChart.dispose()
    serviceChart = null
  }
  
  serviceChart = echarts.init(serviceChartRef.value)
  const chartData = displayedServices.value.slice().reverse()
  
  console.log('📈 服务排行榜图表初始化: 图表数据', chartData)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: (params: any) => {
        const data = params[0]
        return `${data.name}<br/>调用次数: ${data.value.toLocaleString()}`
      }
    },
    grid: {
      left: '20%',
      right: '15%',
      top: '10%',
      bottom: '10%'
    },
    xAxis: {
      type: 'value',
      name: '调用次数',
      axisLabel: {
        formatter: (value: number) => formatNumber(value)
      }
    },
    yAxis: {
      type: 'category',
      data: chartData.map(item => item.name),
      axisLabel: {
        interval: 0,
        fontSize: 12,
        width: 120,
        overflow: 'truncate'
      }
    },
    series: [{
      name: '调用次数',
      type: 'bar',
      data: chartData.map(item => item.totalCalls),
      itemStyle: {
        color: '#1890ff'
      },
      label: {
        show: true,
        position: 'right',
        formatter: (params: any) => formatNumber(params.value),
        fontSize: 11,
        color: '#666'
      }
    }]
  }
  serviceChart.setOption(option)
  
  // 添加点击事件
  serviceChart.on('click', (params) => {
    const serviceName = params.name
    const service = serviceLeaderboard.value.find(s => s.name === serviceName)
    if (service) {
      selectedService.value = service
      showServiceDetail.value = true
      nextTick(() => {
        initServiceDetailCharts()
      })
    }
  })
}

// 初始化服务详情图表
const initServiceDetailCharts = () => {
  if (!selectedService.value) return
  
  // 饼图
  if (pieChartRef.value) {
    pieChart = echarts.init(pieChartRef.value)
    const pieOption = {
      tooltip: {
        trigger: 'item'
      },
      series: [{
        name: '方法调用分布',
        type: 'pie',
        radius: '50%',
        data: selectedService.value.methods?.map(method => ({
          value: method.callCount,
          name: method.method
        })) || []
      }]
    }
    pieChart.setOption(pieOption)
  }
  
  // 方法趋势图
  if (methodTrendChartRef.value) {
    methodTrendChart = echarts.init(methodTrendChartRef.value)
    const trendOption = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: selectedService.value.methods?.slice(0, 3).map(m => m.method) || []
      },
      xAxis: {
        type: 'category',
        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
      },
      yAxis: {
        type: 'value'
      },
      series: selectedService.value.methods?.slice(0, 3).map(method => ({
        name: method.method,
        type: 'line',
        data: [100, 120, 150, 180, 200, 170] // 模拟数据
      })) || []
    }
    methodTrendChart.setOption(trendOption)
  }
}

// 初始化依赖关系图
const initDependencyGraph = () => {
  if (!dependencyGraphRef.value) return
  
  dependencyGraph = echarts.init(dependencyGraphRef.value)
  const option = {
    tooltip: {},
    series: [{
      type: 'graph',
      layout: 'force',
      data: rpcStore.dependencyNodes,
      links: rpcStore.dependencyLinks,
      roam: true,
      force: {
        repulsion: 100
      }
    }]
  }
  dependencyGraph.setOption(option)
}

// 初始化自定义图表
const initCustomChart = () => {
  if (!customChartRef.value) return
  
  customChart = echarts.init(customChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '查询结果',
      type: 'line',
      data: []
    }]
  }
  customChart.setOption(option)
}

// 执行查询
const executeQuery = async () => {
  try {
    const result = await rpcStore.executeCustomQuery(queryParams)
    if (customChart) {
      const option = {
        xAxis: {
          data: result.timeLabels
        },
        series: [{
          data: result.values
        }]
      }
      customChart.setOption(option)
    }
    message.success('查询执行成功')
  } catch (error) {
    message.error('查询执行失败')
  }
}

// 刷新依赖关系图
const refreshDependencyGraph = () => {
  rpcStore.refreshDependencyData()
  initDependencyGraph()
}

// 重置依赖关系图视图
const resetDependencyView = () => {
  if (dependencyGraph) {
    dependencyGraph.clear()
    initDependencyGraph()
  }
}

// 组件挂载
onMounted(async () => {
  try {
    // 加载RPC数据
    await rpcStore.loadRPCData()
    
    // 分阶段初始化各个区域
    // 1. 首先初始化概览区域
    setTimeout(() => {
      loadingStates.overview = false
      nextTick(() => {
        initTrendChart()
      })
    }, 300)
    
    // 2. 然后初始化服务排行榜
    setTimeout(() => {
      loadingStates.serviceLeaderboard = false
      nextTick(() => {
        // 确保数据已加载后再初始化图表
        if (serviceLeaderboard.value && serviceLeaderboard.value.length > 0) {
          initServiceChart()
        } else {
          console.log('⚠️ 服务排行榜数据未准备好，延迟初始化')
          // 如果数据还没准备好，再等一会儿
          setTimeout(() => {
            if (serviceLeaderboard.value && serviceLeaderboard.value.length > 0) {
              initServiceChart()
            } else {
              console.log('❌ 服务排行榜数据加载失败')
            }
          }, 500)
        }
      })
    }, 600)
    
    // 3. 初始化热门方法
    setTimeout(() => {
      loadingStates.hotMethods = false
    }, 900)
    
    // 4. 初始化依赖关系图
    setTimeout(() => {
      loadingStates.dependency = false
      nextTick(() => {
        initDependencyGraph()
      })
    }, 1200)
    
    // 5. 最后初始化分析器
    setTimeout(() => {
      loadingStates.analyzer = false
      nextTick(() => {
        initCustomChart()
      })
    }, 1500)
    
    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      trendChart?.resize()
      serviceChart?.resize()
      pieChart?.resize()
      methodTrendChart?.resize()
      dependencyGraph?.resize()
      customChart?.resize()
    })
  } catch (error) {
    message.error('数据加载失败，请稍后重试')
    // 出错时也要关闭所有loading状态
    Object.keys(loadingStates).forEach(key => {
      loadingStates[key] = false
    })
  }
})
</script>

<style scoped>
.rpc-analysis {
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.title-bar {
  text-align: center;
  margin-bottom: 32px;
  color: white;
}

.title-bar h1 {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

.global-overview,
.service-leaderboard,
.hot-methods,
.dependency-map,
.trend-analyzer {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 排行榜头部样式 */
.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.leaderboard-header h2 {
  margin: 0;
}

.global-overview h2,
.service-leaderboard h2,
.hot-methods h2,
.dependency-map h2,
.trend-analyzer h2 {
  margin: 0 0 20px 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

/* 统计卡片样式 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  margin-right: 16px;
  padding: 12px;
  background: #f0f9ff;
  border-radius: 8px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

/* 图表容器样式 */
.chart-container {
  height: 400px;
  width: 100%;
}

.graph-container {
  height: 500px;
  width: 100%;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}

/* 趋势图样式 */
.trend-chart h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #333;
}

/* 排行榜样式 */
.leaderboard-content h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #333;
}

/* 方法表格样式 */
.methods-table {
  margin-top: 16px;
}

/* 服务详情样式 */
.service-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.service-info-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.service-info-card h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #333;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-item label {
  font-weight: 500;
  color: #666;
  min-width: 80px;
}

.info-item span {
  font-family: 'Courier New', monospace;
  background: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.method-distribution,
.method-trends,
.method-details {
  margin-bottom: 24px;
}

.method-distribution h3,
.method-trends h3,
.method-details h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #333;
}

/* 依赖关系图样式 */
.dependency-content {
  margin-top: 16px;
}

.dependency-controls {
  margin-bottom: 16px;
}

/* 趋势分析器样式 */
.analyzer-content {
  margin-top: 16px;
}

.query-builder {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 24px;
}

.custom-chart {
  min-height: 400px;
}

/* 数据警告提示样式 */
.data-warning {
  margin-bottom: 24px;
}

/* 区域加载状态样式 */
.section-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  padding: 40px;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .rpc-analysis {
    padding: 16px;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .global-overview,
  .service-leaderboard,
  .hot-methods,
  .dependency-map,
  .trend-analyzer {
    padding: 16px;
  }
  
  .chart-container {
    height: 300px;
  }
  
  .graph-container {
    height: 400px;
  }
}
</style>